<script setup>
import { ref, reactive, onMounted } from 'vue';
import { RouterLink, useRouter } from 'vue-router';
import TheNavBar from '../components/TheNavBar.vue';

const router = useRouter();
const searchQuery = ref('');

// 模拟数据 - 地区列表
const regions = ref(['全部', '川藏', '云南', '江浙沪', '东北', '广东', '福建', '北京', '西安', '新疆']);

// 选中的地区
const selectedRegion = ref('全部');

// 新评论内容
const newComment = reactive({
  content: '',
  region: '全部',
  scenicSpot: '',
  rating: 5
});

// 评论列表
const comments = ref([
  {
    id: 1,
    author: '旅行者小明',
    avatar: '/src/assets/1.webp',
    content: '川藏线的风景真的太美了！特别是在新都桥的那几天，雪山、草原、湖泊，简直就是仙境。强烈推荐大家自驾或者骑行去体验一下。',
    region: '川藏',
    scenicSpot: '新都桥',
    rating: 5,
    likes: 234,
    liked: false,
    date: '2023-10-15',
    time: '14:30'
  },
  {
    id: 2,
    author: '美食达人',
    avatar: '/src/assets/2.webp',
    content: '云南的过桥米线真的名不虚传，特别是在蒙自的老店吃的，汤头鲜美，配料丰富。另外大理的洱海也很美，建议租辆电动车环湖一周。',
    region: '云南',
    scenicSpot: '洱海',
    rating: 4,
    likes: 156,
    liked: false,
    date: '2023-10-12',
    time: '09:15'
  },
  {
    id: 3,
    author: '摄影师小王',
    avatar: '/src/assets/3.webp',
    content: '杭州西湖的夜景真的太美了，特别是三潭印月，晚上灯光亮起的时候，简直就是人间仙境。建议大家傍晚时分去，可以看到日落和夜景。',
    region: '江浙沪',
    scenicSpot: '西湖',
    rating: 5,
    likes: 312,
    liked: false,
    date: '2023-10-10',
    time: '19:45'
  },
  {
    id: 4,
    author: '东北汉子',
    avatar: '/src/assets/东北.png',
    content: '哈尔滨的冰雪大世界真的太壮观了，各种冰雕雪雕栩栩如生。不过冬天去真的很冷，一定要穿厚一点，特别是手套和鞋子要保暖。',
    region: '东北',
    scenicSpot: '冰雪大世界',
    rating: 5,
    likes: 278,
    liked: false,
    date: '2023-10-08',
    time: '11:20'
  },
  {
    id: 5,
    author: '老广美食家',
    avatar: '/src/assets/广东.png',
    content: '广州早茶真的是一种文化，虾饺、烧卖、凤爪，每一样都那么精致美味。建议大家去陶陶居或者广州酒家这些老字号品尝最正宗的广式早茶。',
    region: '广东',
    scenicSpot: '陶陶居',
    rating: 4,
    likes: 189,
    liked: false,
    date: '2023-10-05',
    time: '08:30'
  }
]);

// 筛选后的评论列表
const filteredComments = ref(comments.value);

// 发布评论
const publishComment = () => {
  if (!newComment.content.trim() || !newComment.scenicSpot.trim()) {
    alert('请填写评论内容和景点名称');
    return;
  }

  const now = new Date();
  const comment = {
    id: Date.now(), // 使用时间戳作为唯一ID
    author: '我',
    avatar: '/src/assets/1.webp',
    content: newComment.content,
    region: newComment.region,
    scenicSpot: newComment.scenicSpot,
    rating: newComment.rating,
    likes: 0,
    liked: false,
    date: now.toISOString().split('T')[0],
    time: now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0')
  };

  // 添加到评论列表开头
  comments.value.unshift(comment);
  
  // 清空表单
  newComment.content = '';
  newComment.scenicSpot = '';
  newComment.rating = 5;
  
  // 重新筛选
  filterComments();
};

// 点赞/取消点赞
const toggleLike = (id) => {
  const comment = comments.value.find(c => c.id === id);
  if (comment) {
    if (comment.liked) {
      comment.likes--;
    } else {
      comment.likes++;
    }
    comment.liked = !comment.liked;
  }
};

// 筛选评论
const filterComments = () => {
  let result = comments.value;
  
  // 按地区筛选
  if (selectedRegion.value !== '全部') {
    result = result.filter(comment => comment.region === selectedRegion.value);
  }
  
  // 按搜索词筛选
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase().trim();
    result = result.filter(comment => 
      comment.content.toLowerCase().includes(query) ||
      comment.scenicSpot.toLowerCase().includes(query) ||
      comment.author.toLowerCase().includes(query)
    );
    
    // 搜索后滚动到结果区域
    setTimeout(() => {
      const commentSection = document.querySelector('.space-y-6.mb-12');
      if (commentSection) {
        commentSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }, 100);
  }
  
  filteredComments.value = result;
};

// 搜索功能
const handleSearch = () => {
  filterComments();
};

// 切换地区筛选
const changeRegion = (region) => {
  selectedRegion.value = region;
  filterComments();
};

// 组件挂载时初始化筛选
onMounted(() => {
  filterComments();
});
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 font-sans w-full">
    <!-- 使用导航栏组件 -->
    <TheNavBar />
    
    <!-- 搜索栏 -->
    <div class="z-20">
      <div class="container mx-auto px-4 py-3 flex justify-center">
        <div class="relative flex-grow max-w-xl">
          <input 
            v-model="searchQuery"
            type="text" 
            placeholder="搜索评论内容..." 
            class="w-full pl-10 pr-12 py-2 rounded-full border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none shadow-sm"
          >
          <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          <button @click="handleSearch" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-primary hover:text-primary/80 transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="w-full px-4 py-6">
      <!-- 欢迎语 -->
      <div class="mb-8 text-center relative">
        <button 
          @click="router.push('/log')"
          class="absolute left-4 top-0 bg-primary text-white px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 hover:bg-primary/90 z-10"
        >
          <i class="fa fa-arrow-left mr-1"></i> 返回首页
        </button>
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-2">旅行论坛</h1>
        <p class="text-gray-600 text-lg">分享你的旅行故事，查看他人的真实体验</p>
      </div>

      <!-- 发表评论区域 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-8">
        <h2 class="text-xl font-bold text-dark mb-4">分享你的旅行体验</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">选择地区</label>
            <select 
              v-model="newComment.region" 
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none"
            >
              <option v-for="region in regions" :key="region" :value="region">{{ region }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">景点名称</label>
            <input 
              v-model="newComment.scenicSpot"
              type="text" 
              placeholder="请输入景点名称" 
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none"
            >
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">评分</label>
            <div class="flex items-center space-x-1">
              <span v-for="star in 5" :key="star" 
                class="text-2xl cursor-pointer transition-colors"
                :class="newComment.rating >= star ? 'text-amber-500' : 'text-gray-300'"
                @click="newComment.rating = star"
              >
                ★
              </span>
            </div>
          </div>
        </div>
        
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">评论内容</label>
          <textarea 
            v-model="newComment.content"
            rows="4" 
            placeholder="分享你的旅行体验，帮助其他旅行者..." 
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none resize-none"
          ></textarea>
        </div>
        
        <div class="text-right">
          <button 
            @click="publishComment"
            class="px-6 py-2 rounded-full bg-primary hover:bg-primary/90 text-white font-medium transition-all duration-300 hover-scale"
          >
            发布评论 <i class="fa fa-paper-plane ml-1"></i>
          </button>
        </div>
      </div>

      <!-- 地区筛选 -->
      <div class="mb-8 bg-white rounded-xl shadow-md p-4 overflow-x-auto">
        <div class="flex space-x-2 min-w-max">
          <button 
            v-for="region in regions" 
            :key="region"
            :class="[
              'px-4 py-2 rounded-full text-sm font-medium transition-all duration-300',
              selectedRegion === region 
                ? 'bg-primary text-white' 
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            ]"
            @click="changeRegion(region)"
          >
            {{ region }}
          </button>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="space-y-6 mb-12">
        <div 
          v-for="comment in filteredComments" 
          :key="comment.id"
          class="bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all duration-300"
        >
          <div class="p-6">
            <!-- 评论头部信息 -->
            <div class="flex items-center mb-4">
              <img :src="comment.avatar" :alt="comment.author" class="w-12 h-12 rounded-full object-cover mr-4">
              <div class="flex-grow">
                <div class="flex justify-between items-center">
                  <h3 class="font-bold text-dark">{{ comment.author }}</h3>
                  <div class="flex items-center text-sm text-gray-500">
                    <span>{{ comment.date }}</span>
                    <span class="mx-2">·</span>
                    <span>{{ comment.time }}</span>
                  </div>
                </div>
                <div class="flex items-center mt-1">
                  <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full mr-2">{{ comment.region }}</span>
                  <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full">{{ comment.scenicSpot }}</span>
                  <div class="ml-auto flex items-center">
                    <span v-for="star in 5" :key="star" 
                      class="text-xs text-amber-500"
                      :class="comment.rating >= star ? 'text-amber-500' : 'text-gray-300'"
                    >
                      ★
                    </span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 评论内容 -->
            <p class="text-gray-700 mb-4 leading-relaxed">{{ comment.content }}</p>
            
            <!-- 评论操作 -->
            <div class="flex items-center text-sm">
              <button 
                @click="toggleLike(comment.id)"
                :class="[
                  'flex items-center mr-6 transition-all duration-300',
                  comment.liked 
                    ? 'text-red-500' 
                    : 'text-gray-500 hover:text-primary'
                ]"
              >
                <i :class="comment.liked ? 'fa fa-heart' : 'fa fa-heart-o'" class="mr-1"></i>
                <span>{{ comment.likes }}</span>
              </button>
              <button class="flex items-center text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-comment-o mr-1"></i>
                <span>回复</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 没有评论时的提示 -->
      <div v-if="filteredComments.length === 0" class="text-center py-12 bg-white rounded-xl shadow-md">
        <i class="fa fa-comments-o text-5xl text-gray-300 mb-4"></i>
        <h3 class="text-xl font-bold text-gray-700 mb-2">暂无评论</h3>
        <p class="text-gray-500">成为第一个发表评论的人吧！</p>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
      <div class="w-full px-4 text-center">
        <p class="mb-4"><i class="fa fa-comments mr-2"></i>旅行论坛 - 分享真实的旅行体验</p>
        <p class="text-gray-400 text-sm">© 2023 旅行论坛. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
:root {
  --primary: #FF7A45; /* 活力橙 */
  --secondary: #40A9FF; /* 清新蓝 */
  --tertiary: #52C41A; /* 生机绿 */
  --dark: #1F2937;
  --light: #F9FAFB;
}

.hover-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.text-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-primary\/10 {
  background-color: rgba(255, 122, 69, 0.1);
}

.bg-primary\/90 {
  background-color: rgba(255, 122, 69, 0.9);
}

.text-dark {
  color: var(--dark);
}

.text-gray-600 {
  color: #4B5563;
}

.text-gray-700 {
  color: #374151;
}

.text-gray-500 {
  color: #6B7280;
}

.text-gray-400 {
  color: #9CA3AF;
}

.text-gray-300 {
  color: #D1D5DB;
}

.text-amber-500 {
  color: #F59E0B;
}

.text-red-500 {
  color: #EF4444;
}

.text-blue-600 {
  color: #2563EB;
}

.bg-blue-100 {
  background-color: #DBEAFE;
}

.bg-blue-50 {
  background-color: #EFF6FF;
}

.bg-purple-50 {
  background-color: #F5F3FF;
}

.bg-gray-100 {
  background-color: #F3F4F6;
}

.bg-gray-200 {
  background-color: #E5E7EB;
}

.bg-white {
  background-color: #FFFFFF;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.overflow-x-auto {
  overflow-x: auto;
}

.min-w-max {
  min-width: max-content;
}

.resize-none {
  resize: none;
}

.leading-relaxed {
  line-height: 1.625;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .grid-cols-1,
  .md\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  
  .nav .flex-grow {
    display: none;
  }
}
</style>

<style>
/* 全局样式 */
@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');

/* 修复移动端底部安全区域 */
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>